<template>
    <div class="login-page">
        <LoginHead/>
        <div :class="{ active: isActive }" class="container">
            <!-- 登录表单 -->
            <div class="form-box login">
                <el-form
                        ref="loginForm"
                        v-loading="loading"
                        :model="loginForm"
                        :rules="loginRules"
                        status-icon
                >
                    <!--<h1>登录</h1>-->
                    <div class="input-box">
                        <el-form-item prop="name">
                            <input
                                    v-model="loginForm.name"
                                    placeholder="请输入账号"
                                    required
                                    type="text"
                            />
                            <i class="bx bxs-user"></i>
                        </el-form-item>
                    </div>
                    <div class="input-box">
                        <el-form-item prop="pass">
                            <input
                                    v-model="loginForm.pass"
                                    placeholder="请输入密码"
                                    required
                                    type="password"
                            />
                            <i class="bx bxs-lock-alt"></i>
                        </el-form-item>
                    </div>
                    <el-form-item class="remember-me" prop="rememberMe">
                        <el-switch v-model="loginForm.rememberMe"></el-switch>
                        <span class="ml-2">记住我</span>
                    </el-form-item>
                    <button class="btn" type="submit" @click="submitLoginForm">登录</button>
                </el-form>
            </div>

            <!-- 注册表单 -->
            <div class="form-box register">
                <el-form
                        ref="registerForm"
                        v-loading="loading"
                        :model="registerForm"
                        :rules="registerRules"
                        status-icon
                >
                    <!--<h1>注册</h1>-->
                    <div class="input-box">
                        <el-form-item prop="name">
                            <input v-model="registerForm.name"
                                   placeholder="请输入账号"
                                   required
                                   type="text"
                            />
                            <i class="bx bxs-user"></i>
                        </el-form-item>
                    </div>
                    <div class="input-box">
                        <el-form-item prop="pass">
                            <input
                                    v-model="registerForm.pass"
                                    autocomplete="off"
                                    placeholder="请输入密码"
                                    required
                                    type="password"
                            />
                            <i class="bx bxs-lock-alt"></i>
                        </el-form-item>
                    </div>
                    <div class="input-box">
                        <el-form-item prop="checkPass">
                            <input
                                    v-model="registerForm.checkPass"
                                    autocomplete="off"
                                    placeholder="请再次输入密码"
                                    required
                                    type="password"
                            />
                            <i class="bx bxs-lock-alt"></i>
                        </el-form-item>
                    </div>
                    <div class="input-box">
                        <el-form-item prop="email">
                            <input v-model="registerForm.email"
                                   autocomplete="off"
                                   placeholder="请输入邮箱"
                                   required
                            />
                            <i class='bx bxs-envelope' ></i>
                        </el-form-item>
                    </div>
                    <el-form-item>
                        <button class="btn" @click="submitRegisterForm">注册</button>
                        <!--<el-button @click="resetForm('registerForm')">重置</el-button>-->
                    </el-form-item>
                </el-form>
            </div>

            <!-- 切换面板 -->
            <div class="toggle-box">
                <div v-if="!isActive" class="toggle-panel toggle-left">
                    <h1>欢迎使用！</h1>
                    <p>还没有账户?</p>
                    <button class="btn register-btn" @click="showRegister">去注册</button>
                </div>
                <div v-if="isActive" class="toggle-panel toggle-right">
                    <h1>欢迎回来!</h1>
                    <p>已经有账户?</p>
                    <button class="btn login-btn" @click="showLogin">去登录</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {userRegister} from "@/api/auth/auth";
import LoginHead from "@/views/auth/component/LoginHead.vue"; // 假设你有这个API接口

export default {
    name: "Login",
    components: {LoginHead},
    data() {
        return {
            isActive: false, // 用于切换登录和注册表单
            loading: false,
            // 登录表单
            loginForm: {
                name: "",
                pass: "",
                rememberMe: true,
            },
            // 注册表单
            registerForm: {
                name: "",
                pass: "",
                checkPass: "",
                email: "",
            },
            loginRules: {
                name: [
                    {required: true, message: "请输入账号", trigger: "blur"},
                    {
                        min: 2,
                        max: 15,
                        message: "长度在 2 到 15 个字符",
                        trigger: "blur",
                    },
                ],
                pass: [
                    {required: true, message: "请输入密码", trigger: "blur"},
                    {
                        min: 6,
                        max: 20,
                        message: "长度在 6 到 20 个字符",
                        trigger: "blur",
                    },
                ],
            },
            registerRules: {
                name: [
                    {required: true, message: "请输入账号", trigger: "blur"},
                    {
                        min: 2,
                        max: 10,
                        message: "长度在 2 到 10 个字符",
                        trigger: "blur",
                    },
                ],
                pass: [
                    {required: true, message: "请输入密码", trigger: "blur"},
                    {
                        min: 6,
                        max: 20,
                        message: "长度在 6 到 20 个字符",
                        trigger: "blur",
                    },
                ],
                checkPass: [
                    {required: true, message: "请再次输入密码", trigger: "blur"},
                    {
                        validator: (rule, value, callback) => {
                            if (value === "") {
                                callback(new Error("请再次输入密码"));
                            } else if (value !== this.registerForm.pass) {
                                callback(new Error("两次输入密码不一致!"));
                            } else {
                                callback();
                            }
                        },
                        trigger: "blur",
                    },
                ],
                email: [
                    {required: true, message: "请输入邮箱地址", trigger: "blur"},
                    {
                        type: "email",
                        message: "请输入正确的邮箱地址",
                        trigger: ["blur", "change"],
                    },
                ],
            },
        };
    },
    methods: {
        // 登录表单提交
        submitLoginForm() {
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    this.loading = true;
                    this.$store
                            .dispatch("user/login", this.loginForm)
                            .then(() => {
                                this.$message({
                                    message: "恭喜你，登录成功",
                                    type: "success",
                                    duration: 2000,
                                });
                                setTimeout(() => {
                                    this.loading = false;
                                    this.$router.push({path: this.redirect || "/",query: {}});
                                }, 100); // 100毫秒延迟
                            })
                            .catch((error) => {
                                this.loading = false;
                            });
                }
            });
        },

        // 注册表单提交
        submitRegisterForm() {
            this.$refs.registerForm.validate((valid) => {
                if (valid) {
                    this.loading = true;
                    userRegister(this.registerForm)
                            .then((value) => {
                                const {code, message} = value;
                                if (code === 200) {
                                    this.$message({
                                        message: "账号注册成功",
                                        type: "success",
                                    });
                                    setTimeout(() => {
                                        this.loading = false;
                                        this.isActive = false;
                                    }, 100); // 100毫秒延迟
                                } else {
                                    this.$message.error("注册失败，" + message);
                                }
                            })
                            .catch(() => {
                                this.loading = false;
                            });
                } else {
                    return false;
                }
            });
        },

        // 重置表单
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },

        // 显示注册表单
        showRegister() {
            this.isActive = true;
        },

        // 显示登录表单
        showLogin() {
            this.isActive = false;
        },
    },
};
</script>

<style scoped>
.remember-me {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    //background: linear-gradient(90deg, #e2e2e2, #c9d6ff);
}

.login-page .container {
    position: relative;
    //width: 850px;
    width: 100vw;
    max-width: 850px !important;
    height: 550px;
    background: #ffffff;
    border-radius: 30px;
    box-shadow: 0 0 30px rgba(0, 0, 0, .2);
    margin: 20px;
    overflow: hidden;
}

.login-page .form-box {
    position: absolute;
    right: 0;
    width: 50%;
    height: 100%;
    background: #ffffff;
    display: flex;
    align-items: center;
    color: #333333;
    text-align: center;
    padding: 40px;
    z-index: 1;
    transition: .6s ease-in-out 1.2s, visibility 0s 1s;
}

.container.active .form-box {
    right: 50%;
}

.form-box.register {
    visibility: hidden;
}

.container.active .form-box.register {
    visibility: visible;
}

.login-page .container form {
    width: 100%;
}

.container h1 {
    font-size: 36px;
    margin: -10px 0;
}

.input-box {
    position: relative;
    margin: 30px 0;
}

.input-box input {
    width: 100%;
    padding: 13px 50px 13px 20px;
    background: #eeeeee;
    border-radius: 8px;
    border: none;
    outline: none;
    font-size: 16px;
    color: #333333;
    font-weight: 500;
}

.input-box input::placeholder {
    color: #888888;
    font-weight: 400;
}

.input-box i {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #888888;
}

.forgot-link {
    margin: -15px 0 15px;

    a {
        font-size: 14px;
        color: #333333;
        text-decoration: none;
    }
}

.btn {
    width: 100%;
    height: 48px;
    background: #7494ec;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: #ffffff;
    font-weight: 600;
}

.container p {
    font-size: 14px;
    margin: 15px 0;
}

.social-icons {
    display: flex;
    justify-content: center;
}

.social-icons a {
    display: inline-flex;
    padding: 10px;
    border: 2px solid #cccccc;
    border-radius: 8px;
    font-size: 24px;
    color: #333333;
    text-decoration: none;
    margin: 0 8px;
}

.toggle-box {
    position: absolute;
    width: 100%;
    height: 100%;
}

.toggle-box::before {
    content: '';
    position: absolute;
    left: -250%;
    width: 300%;
    height: 100%;
    background: #7484ec;
    border-radius: 150px;
    z-index: 2;
    transition: 1.8s ease-in-out;
}

.container.active .toggle-box::before {
    left: 50%;
}

.toggle-panel {
    position: absolute;
    width: 50%;
    height: 100%;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2;
    transition: .6s ease-in-out;
}

.toggle-panel.toggle-left {
    left: 0;
    transition-delay: 1.2s;
}

.container.active .toggle-panel.toggle-left {
    left: -50%;
    transition-delay: .6s;
}

.toggle-panel.toggle-right {
    right: -50%;
    transition-delay: .6s;
}

.container.active .toggle-panel.toggle-right {
    right: 0;
    transition-delay: 1.2s;
}

.toggle-panel p {
    margin-bottom: 20px;
}

.toggle-panel .btn {
    width: 160px;
    height: 46px;
    background: transparent;
    border: 2px solid #ffffff;
    box-shadow: none;
}

@media screen and (max-width: 650px) {
    .container {
        height: calc(100vh - 40px);
    }

    .form-box {
        bottom: 0;
        width: 100%;
        height: 70%;
    }

    .container.active .form-box {
        right: 0;
        bottom: 30%;
    }

    .toggle-box::before {
        left: 0;
        top: -270%;
        width: 100%;
        height: 300%;
        border-radius: 20vw;
    }

    .container.active .toggle-box::before {
        left: 0;
        top: 70%;
    }

    .toggle-panel {
        width: 100%;
        height: 30%;
    }

    .toggle-panel.toggle-left {
        top: 0;
    }

    .container.active .toggle-panel.toggle-left {
        left: 0;
        top: -30%;
    }

    .toggle-panel.toggle-right {
        right: 0;
        bottom: -30%;
    }

    .container.active .toggle-panel.toggle-right {
        bottom: 0;
    }
}

@media screen and (max-width: 400px) {
    .form-box {
        padding: 20px;
    }

    .toggle-panel h1 {
        font-size: 30px;
    }
}
</style>
